<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.css">
    <style>
        .swiper {
            width: 500px;
            height: 450px;

        }

        .one {
            background-color: red;
            color: white;
            font-size: 30px;
            text-align: center;
            line-height: 450px;
        }
    </style>
</head>

<body>


    <!-- 不要动上面的类名 可以加但是不能改 -->
    <div class="swiper s1">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">slider1</div>
            <div class="swiper-slide one">slider2</div>
            <div class="swiper-slide one">slider3</div>
            <div class="swiper-slide one">slider4</div>
            <div class="swiper-slide one">slider5</div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <div class="swiper s2">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">slider1</div>
            <div class="swiper-slide one">slider2</div>
            <div class="swiper-slide one">slider3</div>
            <div class="swiper-slide one">slider4</div>
            <div class="swiper-slide one">slider5</div>
        </div>
        <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <button class="prev">上一页</button>
    <button class="next">下一页</button>
    <script src="./swiper-bundle.js"></script>
    <script>
        //实例对象 构造函数
        // var mySwiper = new Swiper('.swiper', {
        //     autoplay: true,//可选选项，自动滑动
        //     // direction: 'vertical',
        //     effect: 'cube',
        //     navigation: {
        //         nextEl: '.swiper-button-next',
        //         prevEl: '.swiper-button-prev',
        //     },
        //     loop: true,
        //     pagination: {
        //         el: '.swiper-pagination',
        //     },

        // })
        let prev = document.querySelector(".prev")
        let next = document.querySelector(".next")
        next.onclick = function () {
            mySwiper.slideNext();
        }
        prev.onclick = function () {
            mySwiper.slidePrev();
        }

        //如果需要写两个轮播图的写法
        var mySwiper = new Swiper('.s1', {
            autoplay: true,//可选选项，自动滑动
            // direction: 'vertical',
            effect: 'cube',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },

        })
        var mySwiper = new Swiper('.s2', {
            autoplay: true,//可选选项，自动滑动
            // direction: 'vertical',
            effect: 'cube',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },

        })
        //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例

    </script>


</body>

</html>